// src/views/excel/Export.tsx
import ExportJsonExcel from 'js-export-excel'
import { useEffect, useState } from 'react';
import { getCategoryList, getProList, getSearchProList } from '../../api/pro';
import { Input, Select, Space, Button, Table, Image, Switch } from 'antd'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
type ExportProps = {}
// 产品接口约束
interface DataType {
    proid: string;
    proname: string;
    img1: string;
    originprice: number;
    discount: number;
    sales: number;
    stock: number;
    category: string;
    brand: string;
    issale: number;
    isrecommend: number;
    isseckill: number;
}
export const Export = (props: ExportProps) => {

    const [proList, setProList] = useState<DataType[]>([]) // 表格数
    const [categoryList, setCategoryList] = useState<string[]>([]) // 分类数据
    const [category, setCategory] = useState<string>('') //分类搜索条件
    const [search, setSearch] = useState<string>('') // 关键词搜索

    const [current, setCurrent] = useState<number>(1) // 页码
    const [pageSize, setPageSize] = useState<number>(5) // 每页显示个数

    const getProListData = async () => { // 请求表格数据
        const res = await getProList()
        setProList(res.data.data)
    }

    const getCategoryListData = async () => { // 请求分类的数据
        const res = await getCategoryList()
        setCategoryList(res.data.data)
    }

    useEffect(() => {
        getProListData()
        getCategoryListData()
    }, [])
    return (
        <Space direction='vertical' style={{ width: '100%' }}>
        <Space>
            <Select value={category} style={{ width: 120 }} onChange={value => {
                console.log(value)
                setCategory(value)
            }}>
                <Select.Option key='all' value="">全部</Select.Option>
                {
                    categoryList && categoryList.map(item => {
                        return (
                            <Select.Option key={item} value={item}>{item}</Select.Option>
                        )
                    })
                }
            </Select>
            <Input placeholder='请输入关键词' value={search} onChange={e => setSearch(e.target.value)} />
            <Button type='primary' onClick={async () => {
                const res = await getSearchProList({
                    category,
                    search
                })
                setProList(res.data.data)
            }}>搜索</Button>
            <Button type='primary' onClick={() => {
                const arr = JSON.parse(JSON.stringify(proList))
                arr.sort((a: DataType, b: DataType) => a.originprice - b.originprice)
                setProList(arr)
            }}>价格升序</Button>
            {/* 增加导出数据的功能 */}
            <Button type='primary' onClick={() => {
                let option: {
                    fileName: string
                    datas: {
                        sheetData: DataType[],
                        sheetName: string,
                        sheetFilter: string[],
                        sheetHeader: string[],
                        columnWidths: number[]
                    }[]
                };
                option = {
                    fileName: "产品列表", // 导出的文件的名称
                    datas: [
                        {
                            sheetData: proList, // 表格数据
                            sheetName: "产品列表-基础", // excel表格中表格的名字
                            sheetFilter: ["proname", "img1", "category"], // 需要导出的数据的字段
                            sheetHeader: ["产品名称", "图片", "分类"], // 表头的值
                            columnWidths: [20, 20],
                        },
                        {
                            sheetData: proList, // 表格数据
                            sheetName: "产品列表-完整", // excel表格中表格的名字
                            sheetFilter: ["proname", "img1", "category", 'originprice'], // 需要导出的数据的字段
                            sheetHeader: ["产品名称", "图片", "分类", '价格'], // 表头的值
                            columnWidths: [20, 20],
                        },
                    ]
                }

                var toExcel = new ExportJsonExcel(option); //new
                toExcel.saveExcel(); //保存
            }}>导出数据</Button>
        </Space>
        <Table
            dataSource={proList}
            rowKey="proid"
            bordered
            scroll={{ y: document.body.offsetHeight - 330 }}
            pagination={{
                current,
                pageSize,
                showTotal: (total) => {
                    return <span> 共有 {total} 条数据</span>
                },
                onChange(page, pageSize) {
                    setCurrent(page)
                    setPageSize(pageSize)
                }
            }}
        >
            <Table.Column
                title="序号"
                render={(text, record, index) => { return <span>{(current - 1) * pageSize + index + 1}</span> }}
            ></Table.Column>
            <Table.Column
                title="分类"
                dataIndex="category"
            ></Table.Column>
            <Table.Column
                title="品牌"
                dataIndex="brand"
            ></Table.Column>
            <Table.Column
                title="名称"
                dataIndex="proname"
                render={(text) => { return text.length > 10 ? text.substring(0, 10) + "..." : text }}
            ></Table.Column>
            <Table.Column
                title="图片"
                dataIndex="img1"
                render={(text) => { return <Image src={text} width={80} height={80} /> }}
            ></Table.Column>
            <Table.Column
                title="价格"
                dataIndex="originprice"
                sorter={(a: DataType, b: DataType) => a.originprice - b.originprice}
            ></Table.Column>
            <Table.Column
                title="折扣"
                dataIndex="discount"
                sorter={(a: DataType, b: DataType) => a.discount - b.discount}
            ></Table.Column>
            <Table.Column
                title="销量"
                dataIndex="sales"
                sorter={(a: DataType, b: DataType) => a.sales - b.sales}
            ></Table.Column>
            <Table.Column
                title="库存"
                dataIndex="stock"
                sorter={(a: DataType, b: DataType) => a.stock - b.stock}
            ></Table.Column>
            <Table.Column
                title="是否上架"
                dataIndex="issale"
                render={(text) => { return <Switch checked={text === 1} /> }}
            ></Table.Column>
            <Table.Column
                title="是否推荐"
                dataIndex="isrecommend"
                render={(text) => { return <Switch checked={text === 1} /> }}
            ></Table.Column>
            <Table.Column
                title="是否秒杀"
                dataIndex="isseckill"
                render={(text) => { return <Switch checked={text === 1} /> }}
            ></Table.Column>
            <Table.Column
                title="操作"
                render={(text, record: DataType, index) => {
                    return (
                        <Space>
                            <Button type="primary" shape="circle" icon={<EditOutlined />} />
                            <Button danger shape="circle" icon={<DeleteOutlined />} />
                        </Space>
                    )
                }}
            ></Table.Column>
        </Table>
    </Space>
    )
    
}